iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
Software Development

三十天利用Angular與.net Core開發實戰一波系列 第 3

Day 3 AngularTri專案架構配置-component & service & routing

  • 分享至 

  • xImage
  •  

今天想講一下利用cli建置好一個空的Angular專案後,我覺得應該要有怎麼樣的配置,配置好再寫程式也不遲阿~
為什麼是Angular"Tri",因為鐵人的英文是Triathlon呀

以下為本專案配置好後的程式架構

https://ithelp.ithome.com.tw/upload/images/20181018/20105684JNmnQ6qber.png

根據之前公司的專案架構經驗,先說一下在這個專案系統下
通常會有好幾隻程式所以就會有好幾個component,component裡又會有各自的ts、html、css檔案,很多隻程式就會有不同的routing連結,有一個共用的service來放置共用function,一個共用前端UI library

所以下面的配置就按照這幾點來走吧

  • 建立了一個programs來存放程式tri001
  • 一個共用的programs.service來放置呼叫api
  • 一個共用的app-routing.module來管理各程式的routing
  • 建了一個angular-material.module來當作Angular Material元件的取用

Angular相關概念與知識Angular官網的tutorial講得很清楚了
這邊就直接來用吧

Component建立

首先先建一個./src/app/下建一個programs folder當作系統下的程式放置區

cd src/app/programs
ng g component tri001 --spec false //spec為false不會建立測試程式

建立好如下programs裡面有一隻名為tri001的程式
相關邏輯code就可以寫在tri001.component.ts
https://ithelp.ithome.com.tw/upload/images/20181018/20105684BeFTkIfpYY.png
說一下主要控制此component的程式碼意義

tri001.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-tri001',
  templateUrl: './tri001.component.html',
  styleUrls: ['./tri001.component.css']
})
export class Tri001Component implements OnInit {
  public item: any; //宣告一個名為item的any變數
  constructor() { }

  ngOnInit() {    
  }

selector CSS selector的tag,會寫在html中,應用在Routing與CSS的配置
templateUrl這個component相對應的html
styleUrls 這個component使用的css
constructor()建構子,通常放宣告要使用的service物件
ngOnInit()初始進入此component即會執行的區塊

Service建立

建立programs.service,共用function放這邊

ng g service programs

這時你會在programs.service.ts看到這一行

@Injectable({
  providedIn: 'root',
})

service要相依性注入到cpmponent,首先service要register到provide裡面

A provider is something that can create or deliver a service

根據最新的Angular 6,使用angular cli去generate service他就會幫你register到provider

By default, the Angular CLI command ng generate service registers a provider with the root
injector for your service by including provider metadata in the @Injectable decorator.

就不用像之前一樣還要到app.module裡手動在providers裡面注入自己的service,如下

app.module.ts
import { ProgramsService } from './programs/programs.service';
@NgModule({
  providers: [ProgramsService]
})

Routing建立

cd src/app
ng g module app-routing --flat --module=app 

--flat省去建folder
--module=app 將app-routing 測試進AppModule的imports

通常我們不會在Routing裡宣告元件,所以可以將@NgModule.declarations及CommonModule的宣告刪除
接下來寫一下app-routing程式碼

app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; //記得從router library import這兩個
import { Tri001Component } from './programs/tri001/tri001.component';

// 設定Routes 瀏覽器打上http://localhost:4200/tri001 看的到tri001的程式畫面
const routes: Routes = [{ path: 'tri001', component: Tri001Component }];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

最後關鍵的一刻要在app.component.html

app.component.html
 <nav>
    <a routerLink="/tri001">Tri001</a> //先放上去直接連結
  </nav>
<router-outlet></router-outlet>

以上設定好以後就可以

ng serve

首頁點選Tri001,看看route是否work!
Tri001 is work!!!
https://ithelp.ithome.com.tw/upload/images/20181018/20105684PXc0ERMe8u.png

後面就來講Angular Material與SCSS的配置吧


上一篇
Day 2 - Angular Cli建一個專案
下一篇
Day 4 AngularTri專案架構配置- SCSS style配置
系列文
三十天利用Angular與.net Core開發實戰一波32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言